<template>
	<view class="order">
		<view class="tab flex_r_around">
			<view :id="rec_show=='0,1' ? 'select' : ''" @click="onTab('0,1')">正在进行中
				<!-- {{rec_show=='0,1' ? `(${total})` : ''}} -->
			</view>
			<view :id="rec_show=='2' ? 'select' : ''" @click="onTab('2')">已结束
				<!-- {{rec_show=='2' ? `(${total})` : ''}} -->
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top flex_center">
					<image :src="getImage(item)" mode="aspectFill" class="image"></image>
					<view class="text">
						<view class="name">{{getName(item)}}</view>
						<view class="status">{{getStatus(item)}}</view>

						<view class="tags flex_center" v-if="item.type == 5">
							<view class="hidden">已曝光:{{item.exposure_num}}</view>
							<view class="hidden">成交:{{item.order_num}}单</view>
							<view class="hidden">{{item.cps_ratio == 0 || item.cps_ratio == null ? '推广费' : '佣金'}}:{{
								item.cps_ratio == 0 || item.cps_ratio == null
								? item.price
								: item.brokerage
							}}</view>
						</view>
						<!-- /消耗{{item.brokerage}}元 -->
						<view class="price" v-else>目前已曝光量:{{item.exposure_num}}</view>
					</view>
				</view>

				<view v-if="item.type == 5" class="bottom flex_r_between"
					@click="$util.toUrl(`/pages/generalization/orderdetail?id=${item.id}`)">
					<view class="avatar flex_center">
						<view class="title">带货达人</view>
						<scroll-view scroll-x="true">
							<view class="flex_center">
								<image v-for="(item,index) in item.eredars" :key="index" :src="item.avatar"
									mode="aspectFill"></image>
							</view>
						</scroll-view>
					</view>
					<u-icon name="arrow-right" color="#131313" size="24rpx"></u-icon>
				</view>
			</view>
			<empty v-if="!list.length"></empty>
		</view>

		<view style="padding-top: 16rpx;">
			<u-loadmore v-if="total != 0" :status="status" />
		</view>
	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				rec_show: '0,1',

				page: 1,

				total: 0,

				list: [],

				status: 'loading',
			}
		},
		methods: {
			onTab(rec_show) {
				this.rec_show = rec_show;
				this.list = [];
				this.page = 1;
				this.getList();
			},
			getList() {
				this.$get('/popularize/getPopularizeList', {
					page: this.page,
					rec_show: this.rec_show,
				}).then(res => {
					this.status = 'loading';
					this.total = res.data.total;
					this.list.push(...res.data.data);
					if (this.total <= this.list.length) {
						this.status = 'nomore'
					}
				});
			},

			getImage(element) {
				if (element.type == 1) {
					if (element.content.length) {
						return element.content[0].image;
					} else {
						return '';
					}
				}
				
				if (element.type == 2) {
					if (element.content) {
						return element.content.cover_img;
					} else {
						return '';
					}
				}

				if (element.type == 5) {
					return element.content.image;
				}
			},

			getName(element) {
				if (element.type == 1) {
					// 作品
					return `${element.content.length}个作品`;
				}
				
				if (element.type == 2) {
					if (element.content) {
						return element.content.room_name;
					} else {
						return '';
					}
				}

				if (element.type == 5) {
					// 商品 （达人）
					return `${element.content.name}个作品`;
				}
			},

			getStatus(element) {
				if (element.type == 1) {
					// 作品
					return `${ this.rec_show == '0,1' ? '推广中' : '已结束' }/作品推广`;
				}
				
				if (element.type == 2) {
					return `${ this.rec_show == '0,1' ? '推广中' : '已结束' }/直播推广`;
				}

				if (element.type == 5) {
					// 商品 （达人）
					return `${ this.rec_show == '0,1' ? '推广中' : '已结束' }/${
						element.cps_ratio == 0 || element.cps_ratio == null ? 'CPM' : 'CPS'
					}`;
				}
			},

			reachBottom() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

		},

		created() {
			this.getList();
		},
	}
</script>

<style scoped lang="less">
	
	.order {
		padding: 100rpx 32rpx 32rpx;
	}

	.tab {
		position: fixed;
		top: calc(80rpx + var(--paging-head-top));
		left: 0;
		z-index: 10;
		background: #FFF;
		width: 100vw;

		view {
			padding: 24rpx 0 32rpx;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
		}

		#select {
			font-weight: 500;
			color: #131313;
			line-height: 40rpx;
		}
	}

	.list {
		.item {
			background: linear-gradient(180deg, #FFFFFF 0%, #FFEFF2 100%);
			border-radius: 24rpx;
			border: 2rpx solid #FFDCE3;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.top {
				overflow: hidden;

				.image {
					width: 128rpx;
					height: 128rpx;
					background: linear-gradient(135deg, #FF6191 0%, #FD2A53 100%);
					border-radius: 16rpx;
					margin-right: 24rpx;
				}

				.text {
					flex: 1;

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
					}

					.status {
						font-weight: 500;
						font-size: 28rpx;
						color: #FD2A53;
					}

					.price {
						font-size: 24rpx;
						color: #131313;
					}

					.tags {
						overflow: hidden;

						view {
							flex: 1;
							font-size: 24rpx;
							color: #131313;
						}
					}
				}

			}

			.bottom {
				overflow: hidden;
				margin-top: 24rpx;

				.avatar {
					flex: 1;
					overflow: hidden;

					.title {
						font-size: 28rpx;
						color: #131313;
						flex-shrink: 0;
						margin-right: 16rpx;
					}

					scroll-view {
						flex: 1;
						overflow: hidden;

						view {
							flex-wrap: nowrap;

							image {
								flex-shrink: 0;
								width: 48rpx;
								height: 48rpx;
								border-radius: 48rpx;
								margin: 0 4rpx;
							}
						}
					}
				}
			}

		}
	}

</style>